<template>
  <div class="me_search">
    <el-dialog
      title="添加人员"
      :visible.sync="SearchUserListData.dialogVisible"
      class="small"
      height="50%"
      :before-close="handleClose"
      :modal-append-to-body="false"
    >
      <div class="box">
        <div class="left">
          <div class="left-top">
            <div class="inputDeep">
              <!--             :select="handleSelect"
                :fetch-suggestions="querySearchAsync" -->
              <el-autocomplete
                v-model="input"
                :fetch-suggestions="querySearchAsync"
                placeholder="搜索名字"
                @select="handleSelect"
              />
            </div>
            <div class="button">
              <!-- closable -->
              <el-tag
                v-for="(tag, index) in tableDataList"
                :key="index"
                :disable-transitions="false"
                class="tag"
                closable
                @close="handleCloses(tag)"
              >
                {{ tag.label }}
              </el-tag>
            </div>
          </div>
          <div class="left-but">
            <el-button type="primary" @click="confirm">确 定</el-button>
            <el-button
              @click="SearchUserListData.dialogVisible = false"
            >取 消</el-button>
          </div>
        </div>
        <div class="right">
          <div v-if="isActive">
            <div
              v-for="(item2, index2) in classifyList"
              :key="index2"
              class="classif"
              @click="goclassif(index2)"
            >
              <i class="i1 iconfont" :class="item2.icon" />
              <p class="p2">{{ item2.name }}</p>
            </div>
          </div>
          <div class="content" :class="{ goclassif: isActive }">
            <p class="p3" @click="toclassif">
              <i class="el-icon-arrow-left i3" /> 组织架构
            </p>
            <el-table
              ref="tableData"
              height="35vh"
              :data="getdata"
              style="width: 100%"
              :show-header="false"
              :row-key="getRowKeys"
              @select="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
                :reserve-selection="true"
              >
                <!-- :selectable="checkboxT" -->
              </el-table-column>
              <el-table-column prop="label" />
            </el-table>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" />
    </el-dialog>
  </div>
</template>

<script>
import '@/styles/search.scss'
import { getsearch } from '@/api/uc/search'
import { Verify, arrDifferent } from '@/utils/universality'
import { set } from '@/utils/db.js'
import { inviteJoin } from '@/api/uc/team'
import { loseEffect } from '@/api/xd/documentFlow'
export default {
  components: {},
  props: ['SearchUserListData'],
  data() {
    return {
      dialogVisible: false,
      classifyList: [
        { id: '0', name: '角色', icon: 'el-icon-alljiaose' },
        { id: '1', name: '团队', icon: 'el-icon-alltuanduiguanli' },
        { id: '2', name: '公司部门', icon: 'el-icon-alltuanduiguanli' }
      ],
      groupUserTree: [],
      roleUserTree: [],
      getdata: [],
      itembox: false,
      isActive: true,
      dataList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      permissionIds: [],
      input: '',
      breadcrumb: [],
      terrData: [],
      checkedGh: [],
      restaurants: [],
      timeout: null,
      echoData: '',
      teamUserTree: [],
      tableDataList: [],
      searchList: [],
      i: 0,
      newArr: [],
      groupUserList: [],
      teamId: ''
    }
  },
  watch: {
    SearchUserListData(data) {
      this.teamId = data.teamId
    },
    getdata(data) {
      this.getItem(data)
    },
    tableDataList(data) {
      arrDifferent(data)
    }
  },
  mounted() {
    this.getsearch()
  },
  methods: {
    dialogVisibles() {
      this.dialogVisible = true
      this.breadcrumb = []
    },

    get() {
      console.log(this.data)
    },
    getMsgFormSon(data) {
      this.dataList = data
    },
    handleClose(done) {
      this.dataList = ''
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    goclassif(index) {
      this.isActive = false
      this.itembox = true
      if (index === 0) {
        this.getdata = this.roleUserTree
      } else if (index === 1) {
        this.getdata = this.teamUserTree
      } else if (index == 2) {
        this.getdata = this.groupUserTree
      }
    },
    toclassif() {
      this.isActive = true
      this.itembox = false
      this.breadcrumb = []
    },
    //
    // 搜索
    querySearchAsync(queryString, cb) {
      // if (Verify(queryString) == true) {
      //   return
      // }

      var restaurants = this.newArr
      var results = queryString
        ? this.createStateFilter(queryString)
        : restaurants
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 1000 * Math.random())
    },
    createStateFilter(queryString) {
      const data = []
      this.newArr.forEach((item) => {
        if (item.label.indexOf(queryString) === 0 && item.person != false) {
          item.value = item.label
          data.push(item)
        }
      })
      return data
    },
    // 搜索点击列表
    handleSelect(item) {
      this.input = ''
      this.searchList.push(item)
      this.$refs.tableData.toggleRowSelection(item, true)
      this.tableDataList = [...this.searchList, ...this.dataList]
    },
    // 获取数据
    async getsearch() {
      const getdataList = await getsearch()
      this.groupUserTree = getdataList.data.groupUserTree
      this.teamUserTree = getdataList.data.teamUserTree
      this.roleUserTree = getdataList.data.roleUserTree
      set('personnelGather', JSON.stringify(getdataList))
    },
    // tag回调
    handleCloses(tag) {
      console.log(tag, 'r3')
      this.$refs.tableData.toggleRowSelection(tag, false)
      this.tableDataList.splice(this.tableDataList.indexOf(tag), 1)
      this.$forceUpdate()
    },

    // 点击列表
    click(row) {
      this.$refs.tableData.toggleRowSelection(this.echoData, true)
      if (row.children) {
        this.getdata = row.children
        // this.checkboxT(this.getdata)
        this.breadcrumb.push({ label: row.label, id: row.id })
      }
    },

    checkboxT(row) {
      if (row.person == true) {
        return true
      } else {
        return false
      }
    },
    // 点击选择
    handleSelectionChange(sel, row) {
      const newSearchList = this.searchList
      const newDataList = []
      this.setRowIsSelect(row)

      const Obj = this.$refs.tableData.data
      getUserIdList(Obj)
      function getUserIdList(data) {
        data.forEach((item) => {
          if (item.children) {
            getUserIdList(item.children)
          } else {
            if (item.isSelect == true) {
              newDataList.push(item)
            }
          }
        })
      }
      this.tableDataList = [...newSearchList, ...newDataList]
    },
    toggleRowSelection(data) {
      this.$refs.tableData.toggleRowSelection(data, true)
    },
    // 递归树
    getItem(data) {
      data.forEach((item) => {
        this.i++
        item.keys = this.i
        if (item.children) {
          this.getItem(item.children)
        }
      })
    },

    confirm() {
      this.SearchUserListData.dialogVisible = false
      // this.$emit('SearchUserList', this.tableDataList)
      // ---------------------
      const userIdList = this.tableDataList.map((e) => e.id)
      const saveData = {
        userIdList: userIdList,
        teamId: this.teamId
      }
      inviteJoin(saveData).then((res) => {
        this.$message.success('添加成功')
        this.dialogVisible = false
        this.$parent.getDataList()
      })
    },
    getRowKeys(row) {
      return row.keys
    },
    setRowIsSelect(row) {
      // 当点击父级点复选框时，当前的状态可能为未知状态，所以当前行状态设为false并选中，即可实现子级点全选效果
      if (row.isSelect === '') {
        row.isSelect = false
        this.$refs.tableData.toggleRowSelection(row, true)
      }
      row.isSelect = !row.isSelect
      // 判断操作的是子级点复选框还是父级点复选框，如果是父级点，则控制子级点的全选和不全选
      if (row.children && row.children.length > 0) {
        row.children.forEach((item) => {
          item.isSelect = row.isSelect
          this.$refs.tableData.toggleRowSelection(item, row.isSelect)
        })
      } else {
        // 操作的是子节点  1、获取父节点  2、判断子节点选中个数，如果全部选中则父节点设为选中状态，如果都不选中，则为不选中状态，如果部分选择，则设为不明确状态
        // console.log(row)
        // let parentId = !row.person
        // this.getdata.forEach((item) => {
        //   let isAllSelect = []
        //   console.log('321',item);
        //   if (item.person == parentId) {
        //     item.children.forEach((childrenItem) => {
        //       isAllSelect.push(childrenItem.isSelect)
        //     })
        //     if (
        //       isAllSelect.every((selectItem) => {
        //         return true == selectItem
        //       })
        //     ) {
        //       item.isSelect = true
        //       this.$refs.tableData.toggleRowSelection(item, true)
        //     } else if (
        //       isAllSelect.every((selectItem) => {
        //         return false == selectItem
        //       })
        //     ) {
        //       item.isSelect = false
        //       this.$refs.tableData.toggleRowSelection(item, false)
        //     } else {
        //       item.isSelect = ''
        //     }
        //   }
        // })
      }
    }
  }
}
</script>

<style scoped>
</style>
